<template>
  <div class="isp-home">
    <basic-block>
      <div slot="title">
        <span>公告信息</span>
      </div>
      <el-row type="flex" justify="space-between">
        <el-col :span="24">
          <div class="room-title">大学本周培训项目</div>
          <!-- <vxe-table
                highlight-hover-row
                auto-resize
                show-overflow
                row-id="id"
                ref="xTable1"
                :data="noRoomList">
              <vxe-table-column field="roomName" title="教室名称"></vxe-table-column>
              <vxe-table-column field="userName" title="使用人"></vxe-table-column>
              <vxe-table-column field="subject" title="培训主题"></vxe-table-column>
              <vxe-table-column field="beginDate" title="开始时间"></vxe-table-column>
              <vxe-table-column field="endDate" title="结束时间"></vxe-table-column>
            </vxe-table> -->
          <div v-if="noRoomList.length === 0" class="no-data">暂无教室预约信息</div>
          <div class="no-room-content" v-else>
            <el-row class="room-list header">
                <el-col :span="3" class="list_item">培训教室</el-col><el-col :span="5" class="list_item">培训主题</el-col><el-col :span="3" class="list_item">预约人</el-col>
                <el-col :span="5" class="list_item">培训日期</el-col><el-col :span="5" class="list_item">培训时间</el-col><el-col :span="3" class="list_item">培训人数</el-col> 
              </el-row>
            <div class="content">
              <div v-for="(item,index) in noRoomList" :key="index">
                <el-row class="room-list">
                  <el-col :span="3" class="list_item">{{ item.roomName }}</el-col><el-col :span="5" class="list_item">{{ item.subject }}</el-col><el-col :span="3" class="list_item">{{ item.userName }}</el-col>
                  <el-col :span="5" class="list_item">{{ item.beginDate.split(" ")[0] }}~{{ item.endDate.split(" ")[0] }}</el-col><el-col :span="5" class="list_item">{{ item.beginDate.split(" ")[1] }}~{{ item.endDate.split(" ")[1] }}</el-col><el-col :span="3" class="list_item">{{item.userNumber}}</el-col> 
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
        <!-- <el-col :span="11">
          <div class="room-title">新投入使用的教室信息公告</div>
          <div v-if="newRoomList.length === 0" class="no-data">暂无新投入使用的教室信息公告</div>
          <div class="no-room-content" v-else>
            <div v-for="(item,index) in newRoomList" :key="index">
              <div class="room-list" :title="item.notice">{{item.notice}}</div>
            </div>
          </div>
        </el-col> -->
      </el-row>
      <div v-html="tipsData"></div>
    </basic-block>
  </div>
</template>

<script>
import tableMixins from "@/mixins/tableMixins";
import api from "@/api/classroom/classroom";

export default {
	name: "isp-home",
	mixins: [tableMixins],
	components: {
	},
	data() {
		return {
			noRoomList: [],
			newRoomList: [],
			tipsData: [],
			value1: [],
			timer: null
		}
	},
	created() {
		this.getCompList();
		this.getAddRoom();
		this.getTipsList();
	},
	mounted() {
		this.timer = setInterval(() => {
			if ((new Date().getMinutes() === 0 || new Date().getMinutes() === 30) && new Date().getSeconds() === 0) {
                this.getCompList();
                console.log('成功了！！！')
			}
		}, 1000);
	},
	beforeDestory(){
		clearInterval(this.timer)
	},
	methods: {
		// 获取未使用教室信息列表
		getCompList() {
			const params = {}
			return api.queryNotExpired(params, 'get').then((res) => {
				this.noRoomList = res;
			})
		},
		// 教室新增信息
		getAddRoom() {
			const params = {}
			api.queryNoticeList(params, 'get').then((res) => {
				this.newRoomList = res.content
			})
		},
		// 获取注意事项
		getTipsList() {
			const params = {}
			api.queryTipsList(params, 'get').then((res) => {
				this.tipsData = res[0].attention;
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.room-title{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    color: #f08f00;
}
.no-data{
    min-height: 270px;
    box-shadow: 0 0 10px #4a5c6a;
    text-align: center;
    padding-top: 30px;
    color: #999;
}
.no-room-content {
    min-height: 300px;
    box-shadow: 0 0 10px #4a5c6a;
    border-radius: 5px;
    .content{
      height: 300px;
      overflow: auto;
    }
    .header{
        background: #4a5c6a;
        color: #eee;
    }
    .room-list{
        height: 40px;
        border-bottom: 1px solid #eee;
        line-height: 40px;
        font-size: 14px;
        padding: 0 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .list_item{
            text-align: center;
        }
    }
}
</style>